<template>
    <div id="container">
        <FileManager :FileManagerData="fileManagerData" @express="fileManagerExpress" ></FileManager> 
        <LinkManager :link_visible="linkManagerVisible" :link_object="linkObject" v-on:express="linkManagerExpress">
        </LinkManager>
        <ul v-if="current_block && current_block.layout == 'image.free_table'" class="right-mouse-panel"
            :style="{ 'top': (current_block.right_mouse.clientY - 60) + 'px', 'left': current_block.right_mouse.clientX + 'px' }"
            v-show="current_block.right_mouse.show == 1">
            <li @click="do_mergeTD(current_block)">合并单元格</li>
            <li @click="do_unmergeTD(current_block)">分解单元格</li>
        </ul>
        <ul v-if="current_block && current_block.layout == 'image.one'" class="right-mouse-panel" style="z-index:99"
            :style="{ 'top': (current_block.right_mouse.clientY - 60) + 'px', 'left': current_block.right_mouse.clientX + 'px' }"
            v-show="current_block.right_mouse.show == 1">
            <li @click="area_delete()">删除热点</li>
            <li @click="area_edit_link()">编辑链接</li>
        </ul>

        <div id="content">


            <div class="container-fluid">

                <div class="panel panel-default">


                    <div class="panel-body">

                        <div class="module-mobile">
                            <div class="mobile">
                                <div class="header">
                                    <h3 class="title">自定义装修</h3>
                                </div>
                                <div class="body">

                                    <div :id="blk.id" v-for="(blk, index) in block"
                                        v-bind:class="{ 'active': current_block == blk }" class="layout image ">

                                        <div class="handle">
                                            <div v-on:click.stop="block_delete()" class="handle-item rubbish">
                                                <!-- <i class="el-icon-delete"></i> -->
                                                <delete style="width:14px"></delete>
                                            </div>
                                            <div v-on:click.stop="block_copy()" class="handle-item copy">
                                                <!-- <i class="el-icon-document-copy"></i> -->
                                                <DocumentCopy style="width:14px"></DocumentCopy>
                                            </div>
                                            <div v-on:click.stop="block_up()" class="handle-item up">
                                                <!-- <i class="el-icon-arrow-up"></i> -->
                                                <ArrowUp style="width:14px"></ArrowUp>
                                            </div>
                                            <div v-on:click.stop="block_down()" class="handle-item down">
                                                <!-- <i class="el-icon-arrow-down"></i> -->
                                                <ArrowDown style="width:14px"></ArrowDown>
                                            </div>
                                        </div>
                                        <div class="field">

                                            <div v-if="blk.layout == 'lunbo'" class="rubik" v-bind:class="blk.layout"
                                                v-on:click="edit_cube(blk, index)">
                                                <el-carousel :interval="5000" arrow="always" :height="blk.height / 2 + 'px'">
                                                    <el-carousel-item v-for="(cube, index) in blk.cubes" :key="index">
                                                        <h3>
                                                            <img style="width:100%" :src="cube.image" alt="">
                                                        </h3>
                                                    </el-carousel-item>
                                                </el-carousel>
                                            </div>
                                            <div v-if="blk.layout == 'notice'" class="rubik"
                                                :style="{ 'font-size': blk.fontSize + 'px' }" v-bind:class="blk.layout"
                                                v-on:click="edit_cube(blk, index)">
                                                <i class="el-icon-message-solid"></i>
                                                <div class="message">
                                                    <el-carousel :interval="blk.interval" indicator-position="none"
                                                        arrow="never" loop="true" :direction="blk.direction"
                                                        :height="blk.height + 'px'">
                                                        <el-carousel-item v-for="(cube, index) in blk.cubes" :key="index">
                                                            <span>{{ cube.text }} </span>
                                                        </el-carousel-item>
                                                    </el-carousel>

                                                </div>

                                            </div>
                                            <div v-if="blk.layout.indexOf('image') > -1" class="rubik "
                                                :style="{ height: blk.layout.split('.')[1] == 'one' ? blk.cubes.a.height / 2 + 'px' : '' }"
                                                v-bind:class="blk.layout.split('.')[1]">

                                                <template
                                                    v-if="blk.layout.split('.')[1] != 'one' && blk.layout.split('.')[1].indexOf('free') < 0"
                                                    v-for="cube_item, cube_index in blk.cubes">
                                                    <div :class="['cube', blk.layout.split('.')[1], cube_index,
                                                        blk == current_block &&
                                                            blk.layout == current_layout &&
                                                            cube_index == current_cube ? 'active' : '']"
                                                        :style="{ height: blk.layout.split('.')[1] == 'one' ? blk.cubes.a.height / 2 + 'px' : '' }"
                                                        v-on:click="edit_cube(blk, cube_index)">
                                                        <!--                                                    <span class="placeholder">{{cube_item.placeholder}}</span>-->
                                                        <span class="placeholder">{{ cube_item.width }} *
                                                            {{ cube_item.height }}</span>
                                                        <img v-if="cube_item.image"
                                                            :style="{ width: 'calc(100% - ' + blk.cube_space + 'px)', height: 'calc(100% - ' + blk.cube_space + 'px)' }"
                                                            v-bind:src="cube_item.image" alt="">

                                                        <!--
                                                    <div class="drag active" type="img" index="1634806918635" src=""
                                                         style="z-index: 2147483647; left: 75px; top: 154px; position: absolute; width: 107px; height: 78px;">
                                                        <div class="rRightDown"> </div>
                                                        <div class="rLeftDown"> </div>
                                                        <div class="rRightUp"> </div>
                                                        <div class="rLeftUp"> </div>
                                                        <div class="rRight"> </div>
                                                        <div class="rLeft"> </div>
                                                        <div class="rUp"> </div>
                                                        <div class="rDown"></div>
                                                    </div>
                                                    -->
                                                    </div>
                                                </template>
                                                <template v-if="blk.layout.split('.')[1] == 'one'">
                                                    <div :class="['cube a postera', blk.layout.split('.')[1],
                                                        blk == current_block &&
                                                            blk.layout == current_layout &&
                                                            'a' == current_cube ? 'active' : '']"
                                                        :style="{ height: blk.cubes.a.height / 2 + 'px' }"
                                                        v-on:click="edit_cube(blk, 'a')">
                                                        <span class="placeholder">{{ blk.cubes.a.width }} *
                                                            {{ blk.cubes.a.height }}</span>
                                                        <img v-if="blk.cubes.a.image" style="-webkit-user-drag: none;"
                                                            :style="{ width: 'calc(100% - ' + blk.cube_space + 'px)', height: 'calc(100% - ' + blk.cube_space + 'px)' }"
                                                            v-bind:src="blk.cubes.a.image" alt="">

                                                    </div>

                                                </template>

                                                <template v-if="blk.layout.split('.')[1] == 'free'"
                                                    v-for="cube_item, cube_index in blk.cubes">
                                                    <div :class="['cube', 'free', 'col-' + blk.col_num,
                                                        blk == current_block &&
                                                            blk.layout == current_layout &&
                                                            cube_index == current_cube ? 'active' : '']"
                                                        v-on:click="edit_cube(blk, cube_index)">
                                                        <span class="placeholder" v-show="!cube_item.image">{{
                                                            cube_item.placeholder }}</span>
                                                        <img v-if="cube_item.image" :style="{
                                                            left: 'calc(' + blk.cube_space + 'px/2)',
                                                            top: 'calc(' + blk.cube_space + 'px/2)',
                                                            width: 'calc(100% - ' + blk.cube_space + 'px)',
                                                            height: 'calc(100% - ' + blk.cube_space + 'px)'
                                                        }" v-bind:src="cube_item.image" alt="">
                                                    </div>


                                                </template>

                                                <div v-if="blk.layout.split('.')[1] == 'free_table'"
                                                    v-on:mousemove="mergingTD(blk, $event)"
                                                    v-on:mousedown="startMergeTD(blk, $event)"
                                                    v-on:mouseup="endMergeTD(blk, $event)">

                                                    <table class="mofang-table" style="border-collapse: unset;"
                                                        :style="{ borderSpacing: blk.cube_space / 2 + 'px' }">
                                                        <thead>
                                                            <tr>

                                                                <td v-for="tr_item in blk.col_num"
                                                                    :class="['col-' + blk.col_num]"></td>
                                                            </tr>
                                                        </thead>
                                                        <tr v-for="tr_item  in blk.row_num">

                                                            <td v-for="td_item  in blk.col_num"
                                                                :rowspan="blk.cubes['no-' + (tr_item - 1) + '-' + (td_item - 1)].rowspan"
                                                                :colspan="blk.cubes['no-' + (tr_item - 1) + '-' + (td_item - 1)].colspan"
                                                                :class="['no-' + (tr_item - 1) + '-' + (td_item - 1),
                                                                'col-' + blk.col_num,
                                                                blk.merge_info.length
                                                                    && tr_item > blk.merge_info[0]
                                                                    && tr_item <= blk.merge_info[2] + 1
                                                                    && td_item > blk.merge_info[1]
                                                                    && td_item <= blk.merge_info[3] + 1 ? 'active' : '',
                                                                blk.cubes['no-' + (tr_item - 1) + '-' + (td_item - 1)].hide ? 'hidden' : '',
                                                                blk == current_block && blk.layout == current_layout &&
                                                                    'no-' + (tr_item - 1) + '-' + (td_item - 1) == current_cube ? 'active' : '']"
                                                                :style="{ height: blk.cubes['no-' + (tr_item - 1) + '-' + (td_item - 1)].height / 2 * blk.cubes['no-' + (tr_item - 1) + '-' + (td_item - 1)].rowspan + 'px' }">
                                                                <span class="placeholder"
                                                                    v-show="!blk.cubes['no-' + (tr_item - 1) + '-' + (td_item - 1)].image">
                                                                    {{ blk.cubes['no-' + (tr_item - 1) + '-' + (td_item -
                                                                        1)].width *
                                                                        blk.cubes['no-' + (tr_item - 1) + '-' + (td_item -
                                                                            1)].colspan }}
                                                                    *
                                                                    {{ blk.cubes['no-' + (tr_item - 1) + '-' + (td_item -
                                                                        1)].height *
                                                                        blk.cubes['no-' + (tr_item - 1) + '-' + (td_item -
                                                                            1)].rowspan }}
                                                                </span>
                                                                <img v-if="blk.cubes['no-' + (tr_item - 1) + '-' + (td_item - 1)].image"
                                                                    style="width:100%; height:100%"
                                                                    v-bind:src="blk.cubes['no-' + (tr_item - 1) + '-' + (td_item - 1)].image"
                                                                    alt="">
                                                            </td>

                                                        </tr>
                                                    </table>
                                                </div>

                                            </div>
                                            <div v-if="blk.layout == 'category'" class="rubik" v-bind:class="blk.layout"
                                                v-on:click="edit_cube(blk, index)">

                                                <div v-for="(id, index) in blk.idArr" class="category-item"
                                                    :style="{ 'width': parseInt(100 / parseInt(blk.col_num)) + '%' }">
                                                    <template v-for="( cat, cat_ind ) in category_list">
                                                        <img :style="{ 'border-radius': blk.angle + '%' }"
                                                            v-if="cat.id == id" :src="cat.image" alt="">
                                                    </template>

                                                </div>

                                            </div>

                                            <div v-if="blk.layout == 'product'" class="rubik" v-bind:class="blk.layout"
                                                v-on:click="edit_cube(blk, index)">

                                                <div v-for="(id, index) in blk.idArr" class="product-item">
                                                    <template
                                                        v-for="( product, product_ind ) in product_list" v-bind:index="product_ind">
                                                        <template  v-if="product.id == id">
                                                            <div class="img">
                                                                <img :style="{ 'border-radius': blk.angle + '%' }"
                                                                    :src="product.image" alt="">
                                                            </div>
                                                            <div class="product-info">
                                                                <div class="name">{{ product.name }}</div>
                                                                <div class="sale">{{ product.sale }}</div>
                                                                <div class="price-buy">
                                                                    <span class="price">{{ product.price }}￥</span>
                                                                    <span class="buy">马上抢</span>
                                                                </div>
                                                            </div>
                                                        </template>
                                                        
                                                    </template>


                                                </div>

                                            </div>
                                            <div v-if="blk.layout == 'article'" class="rubik" v-bind:class="blk.layout"
                                                v-on:click="edit_cube(blk, index)">

                                                <div class="article-title">{{ blk.title }}</div>

                                                <div v-for="(id) in blk.idArr" class="article-item">
                                                    <template v-for="( article ) in article_list">
                                                        <template v-if="article.id == id">
                                                            <div>{{ article.title }}</div>
                                                            <div>{{ article.public_time }}</div>
                                                        </template>

                                                    </template>


                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="" style="margin-top:20px">
                                <el-button type="primary" @click="save()">
                                    保存
                                </el-button> 
                            </div>
                             
                        </div>
                        <div class="edit-panel">
                            <div class="all-components">
                                <el-form ref="form" label-width="80px">
                                    <el-form-item label="页面标题">
                                        <el-input v-model="page_title"></el-input>
                                    </el-form-item>
                                    <el-form-item label="添加布局">

                                        <el-button v-on:click="create_block('image.one')"
                                            v-bind:class="{ 'active': layout.indexOf('image.') >= 0 }">
                                            图片布局
                                        </el-button>
                                        <el-button v-on:click="create_block('lunbo')"
                                            v-bind:class="{ 'active': layout == 'lunbo' }">轮播图</el-button>
                                        <el-button v-on:click="create_block('notice')"
                                            v-bind:class="{ 'active': layout == 'notice' }">
                                            公告</el-button>
                                        <el-button v-on:click="create_block('category')"
                                            v-bind:class="{ 'active': layout == 'category' }">商品分类</el-button>
                                        <el-button v-on:click="create_block('product')"
                                            v-bind:class="{ 'active': layout == 'product' }">商品推荐</el-button>
                                        <el-button v-on:click="create_block('article')"
                                            v-bind:class="{ 'active': layout == 'article' }">文章推荐</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="panel">

                                <div v-show="current_block.layout && current_block.layout.indexOf('image.') > -1"
                                    class="panel-item layout-image">

                                    <div class="type-group">
                                        <div class="type" v-for="item, index in layout_dict.image"
                                            v-bind:class="{ 'active': current_block.layout == 'image.' + index }"
                                            v-on:click="select_layout('image.' + index)">
                                            <img :src="'/src/assets/skin/diy/' + item.background" alt="">
                                            <div class="name">{{ item.name }}</div>
                                        </div>
                                    </div>

                                    <div class="type-edit">

                                        <el-row v-if="current_block && current_cube">
                                            <el-col :span="24">
                                                <el-form>
                                                    <el-form-item v-if="current_block.layout == 'image.free'" label="行数"
                                                        label-width="80px">
                                                        <el-input-number @change="mofangSet()"
                                                            v-model="current_block.row_num" :min="0" :max="10"
                                                            label="行数"></el-input-number>
                                                    </el-form-item>
                                                    <el-form-item v-if="current_block.layout == 'image.free'" label="列数"
                                                        label-width="80px">
                                                        <el-input-number @change="mofangSet()"
                                                            v-model="current_block.col_num" :min="0" :max="10"
                                                            label="列数"></el-input-number>
                                                    </el-form-item>
                                                    <el-form-item v-if="current_block.layout == 'image.free_table'"
                                                        label="行数" label-width="80px">
                                                        <el-input-number @change="mofangTableSet()"
                                                            v-model="current_block.row_num" :min="0" :max="10"
                                                            label="行数"></el-input-number>
                                                    </el-form-item>
                                                    <el-form-item v-if="current_block.layout == 'image.free_table'"
                                                        label="列数" label-width="80px">
                                                        <el-input-number @change="mofangTableSet()"
                                                            v-model="current_block.col_num" :min="0" :max="10"
                                                            label="列数"></el-input-number>
                                                    </el-form-item>
                                                    <el-form-item label="图片高度" v-if="current_block.layout == 'image.one'"
                                                        label-width="80px">
                                                        <el-input-number v-model="current_block.cubes[current_cube].height"
                                                            :min="1" label="定义高度"></el-input-number>
                                                    </el-form-item>
                                                    <el-form-item label="图片间隙" label-width="80px"
                                                        v-if="current_block.layout == 'image.free_table'">
                                                        <el-input-number @change="mofangTableSet()"
                                                            v-model="current_block.cube_space" :min="0" :max="10"
                                                            label="描述文字"></el-input-number>
                                                    </el-form-item>
                                                    <el-form-item label="图片间隙" label-width="80px"
                                                        v-if="current_block.layout != 'image.free_table'">
                                                        <el-input-number v-model="current_block.cube_space" :min="0"
                                                            :max="10" label="描述文字"></el-input-number>
                                                    </el-form-item>
                                                    <el-form-item label="添加热点" label-width="80px"
                                                        v-if="current_block.layout == 'image.one'">
                                                        <el-button @click="add_hot_area()">热点</el-button>
                                                    </el-form-item>
                                                    <el-form-item label="图片上传" label-width="80px">
                                                        <el-button @click="open_file_manager()">上传</el-button>
                                                    </el-form-item>
                                                    <el-form-item label="链接" label-width="80px">

                                                        <el-row>
                                                            <el-col :span="16">
                                                                <div>
                                                                    <template
                                                                        v-if="current_block.cubes[current_cube] && current_block.cubes[current_cube].page_link">
                                                                        <span>{{
                                                                            current_block.cubes[current_cube].page_link.title
                                                                        }}</span>
                                                                        <span
                                                                            v-if="current_block.cubes[current_cube].page_link.params">
                                                                            <span
                                                                                v-for="(item, params_index) in current_block.cubes[current_cube].page_link.params"
                                                                                :key="params_index">
                                                                                <span>{{ item.title }}:</span>
                                                                                <span>{{ item.value }}</span>
                                                                            </span>
                                                                        </span>
                                                                    </template>
                                                                    <span style="cursor:pointer"
                                                                        @click="open_link_manager(current_cube)">
                                                                        <!-- <i class="el-icon-edit"></i> -->
                                                                        <Edit style="width:18px;margin-left:10px"></Edit>
                                                                    </span>
                                                                </div>
                                                            </el-col>

                                                        </el-row>

                                                    </el-form-item>
                                                </el-form>
                                            </el-col>
                                        </el-row>

                                    </div>


                                </div>

                                <div class="panel-item layout-lunbo"
                                    v-show="current_block.layout && current_block.layout == 'lunbo'">

                                    <div class="type-edit">

                                        <el-row v-if="current_block">
                                            <el-col :span="24">
                                                <el-form label-width="80px">
                                                    <el-form-item label="宽度">
                                                        <div>{{ current_block.width ? current_block.width : 750 }}</div>
                                                    </el-form-item>
                                                    <el-form-item label="高度">
                                                        <el-input v-model="current_block.height"></el-input>
                                                    </el-form-item>
                                                    <el-form-item :label="'轮播图' + (cube_index + 1)"
                                                        v-for="(cube, cube_index) in current_block.cubes">
                                                        <el-form label-width="80px"
                                                            style="padding-bottom:10px;border-bottom: solid 1px #cdcdcd;">
                                                            <el-form-item label="图片">
                                                                <el-row :gutter="10">
                                                                    <el-col :span="21">
                                                                        <div @click="add_lunbo_image(cube_index)">
                                                                            <el-image :src="cube.image" fit="fill"
                                                                                style="width:40px;border-radius:5px; background-color: #cdcdcd; text-align:center;">
                                                                                <div slot="error" class="image-slot">
                                                                                    <i class="el-icon-picture-outline"></i>
                                                                                </div>
                                                                            </el-image>
                                                                        </div>

                                                                    </el-col>
                                                                    <el-col :span="2">
                                                                        <el-button type="danger"
                                                                            @click="delete_lunbo_cube(cube_index)"
                                                                            icon="el-icon-delete" circle></el-button>
                                                                    </el-col>
                                                                </el-row>

                                                            </el-form-item>
                                                            <el-form-item label="链接" style="margin-top:10px">
                                                                <el-row :gutter="10">
                                                                    <el-col :span="12">

                                                                        <div>
                                                                            <template v-if="cube && cube.page_link">
                                                                                <span>{{ cube.page_link.title }}</span>
                                                                                <span v-if="cube.page_link.params">
                                                                                    <span
                                                                                        v-for="(item, params_index) in cube.page_link.params"
                                                                                        :key="params_index">
                                                                                        <span>{{ item.title }}:</span>
                                                                                        <span>{{ item.value }}</span>
                                                                                    </span>
                                                                                </span>
                                                                            </template>
                                                                            <span style="cursor:pointer"
                                                                                @click="open_link_manager(cube_index)">
                                                                                <!-- <i class="el-icon-edit"></i> -->
                                                                                <Edit style="width:18px;margin-left:10px">
                                                                                </Edit>
                                                                            </span>
                                                                        </div>

                                                                    </el-col>


                                                                </el-row>
                                                            </el-form-item>

                                                        </el-form>

                                                    </el-form-item>

                                                    <el-form-item>
                                                        <el-button @click="add_lunbo_cube(current_block)"
                                                            type="primary">添加轮播图</el-button>
                                                    </el-form-item>

                                                </el-form>
                                            </el-col>

                                        </el-row>

                                    </div>

                                </div>
                                <div class="panel-item layout-notice"
                                    v-show="current_block.layout && current_block.layout == 'notice'">

                                    <div class="type-edit">

                                        <el-row>
                                            <el-col :span="12">
                                                <el-form label-width="80px">
                                                    <el-form-item label="滚动间隔">
                                                        <el-input v-model="current_block.interval">
                                                            <template slot="append">微秒</template>
                                                        </el-input>
                                                    </el-form-item>
                                                    <el-form-item label="滑动时间">
                                                        <el-input v-model="current_block.duration">
                                                            <template slot="append">微秒</template>
                                                        </el-input>
                                                    </el-form-item>
                                                    <el-form-item label="滚动方向">
                                                        <el-select v-model="current_block.direction" placeholder="请选择">
                                                            <el-option v-for="item in current_block.directionArr"
                                                                :key="item.value" :label="item.label" :value="item.value">
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                    <el-form-item label="字体大小">
                                                        <el-input-number v-model="current_block.fontSize" :min="10"
                                                            :max="30" label="字体大小">
                                                        </el-input-number>
                                                    </el-form-item>
                                                    <el-form-item label="公告内容">
                                                        <el-input v-for="(cube, cube_index) in current_block.cubes"
                                                            style="margin-bottom:10px" v-model="cube.text">
                                                            <el-button slot="append" @click="remove_notice_cube(cube_index)"
                                                                type="primary" icon="el-icon-delete"></el-button>
                                                        </el-input>

                                                    </el-form-item>

                                                    <el-form-item>
                                                        <el-button @click="add_notice_cube(current_block)"
                                                            type="primary">添加内容</el-button>
                                                    </el-form-item>
                                                </el-form>
                                            </el-col>
                                        </el-row>

                                    </div>

                                </div>
                                <div class="panel-item layout-category"
                                    v-show="current_block.layout && current_block.layout == 'category'">

                                    <div class="type-edit">

                                        <el-row>
                                            <el-col :span="24">
                                                <el-form label-width="80px">
                                                    <!--<el-form-item label="行数">
                                                    <el-input-number v-model="current_block.row_num"
                                                                     :min="1" :max="4"
                                                                     label="行数">
                                                    </el-input-number>
                                                </el-form-item>-->

                                                    <el-form-item label="每行个数">
                                                        <el-input-number v-model="current_block.col_num" :min="1" :max="10"
                                                            label="每行个数">
                                                        </el-input-number>
                                                    </el-form-item>

                                                    <el-form-item label="圆角度数">
                                                        <el-input-number v-model="current_block.angle" :min="0" :max="50"
                                                            label="圆角度数">
                                                        </el-input-number>
                                                    </el-form-item>

                                                    <el-form-item label="分类项">

                                                        <el-transfer v-model="current_block.idArr" target-order="push"
                                                            :titles="['未选分类', '已选分类']" :data="category_list"></el-transfer>

                                                    </el-form-item>

                                                </el-form>
                                            </el-col>
                                        </el-row>

                                    </div>

                                </div>

                                <div class="panel-item layout-category"
                                    v-show="current_block.layout && current_block.layout == 'product'">

                                    <div class="type-edit">

                                        <el-row>
                                            <el-col :span="24">
                                                <el-form label-width="80px">

                                                    <el-form-item label="圆角度数">
                                                        <el-input-number v-model="current_block.angle" :min="0" :max="50"
                                                            label="圆角度数">
                                                        </el-input-number>
                                                    </el-form-item>

                                                    <el-form-item label="商品项">

                                                        <el-transfer v-model="current_block.idArr" target-order="push"
                                                            filterable :filter-method="filter_product"
                                                            filter-placeholder="请输入商品名称" :titles="['未选商品', '已选商品']"
                                                            :data="product_list"></el-transfer>

                                                    </el-form-item>

                                                </el-form>
                                            </el-col>
                                        </el-row>

                                    </div>

                                </div>

                                <div class="panel-item layout-category"
                                    v-show="current_block.layout && current_block.layout == 'article'">

                                    <div class="type-edit">

                                        <el-row>
                                            <el-col :span="24">
                                                <el-form label-width="80px">

                                                    <el-form-item label="标题">
                                                        <el-input style="width:200px" v-model="current_block.title"
                                                            label="标题">
                                                        </el-input>
                                                    </el-form-item>

                                                    <el-form-item label="文章项">

                                                        <el-transfer v-model="current_block.idArr" target-order="push"
                                                            filterable :filter-method="filter_article"
                                                            filter-placeholder="请输入文章名称" :titles="['未选文章', '已选文章']"
                                                            :data="article_list"></el-transfer>

                                                    </el-form-item>

                                                </el-form>
                                            </el-col>
                                        </el-row>

                                    </div>

                                </div>

                                <div class="panel-item module-product">


                                </div>


                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</template>


<script lang="ts" setup>

// import ImageManager from '../../../Common/image-manager.vue'
import FileManager from '../../../Common/file-manager.vue'
import LinkManager from '../Component/LinkManager.vue'

import { ref, getCurrentInstance, nextTick, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import $ from 'jquery'
import bindEvents from '../../../../assets/js/designer.js'
import { DocumentCopy, Delete, ArrowUp, ArrowDown, Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const route = useRoute();
const router = useRouter();
const VITE_URL = window.VITE_URL;

const diy_id = ref(0)
// const url_pre: '{php echo $this->url_pre;}',
const page_title = ref('')
const block = ref([]) // 整个页面的装修数据，数组形式
const current_block = ref({
    layout: '',
    cubes: {},
})
const current_layout = ref('')
const current_cube = ref('')
const current_area = ref('') // 当前选中热点区域，(热点仅出现在图片布局的单张图中)
const layout = ref('')
const layout_dict = ref({
    lunbo: {
        name: '轮播图',
        width: 750,
        height: 360,
        cube: [{
            // image:'',
            // page_link:''
        }]
    },
    category: {
        name: '分类',
        row_num: 2,    // 行
        col_num: 4,    // 列
        angle: 0,    // 图标圆角,单位:%

        idArr: [],
        cube: []

    },
    product: {
        name: '商品推荐',
        cube: []
    },
    article: {
        name: '文章推荐',
        idArr: [],
        id: 0,
        cube: []
    },
    notice: {
        name: '公告',
        width: 750,
        height: 100,
        interval: 3000,
        duration: 3000,
        direction: 'vertical',
        fontSize: '20',
        directionArr: [{
            value: 'vertical',
            label: '垂直'
        }, {
            value: 'horizontal',
            label: '横向'
        }],
        cube: [{
            text: '',
            page_link: ''
        }]
    },
    image: {
        one: {
            name: '1张图（热点）',
            background: 'rubik-0.png',
            cube: {
                a: {
                    image: '',
                    width: 750,
                    height: 360,
                    placeholder: '宽度为750 * 360',
                }
            }
        },
        'two-fifth': {
            name: '2张图',
            background: 'rubik-1.png',
            cube: {
                a: {
                    image: '',
                    width: 360,
                    height: 360,
                    placeholder: '300 * 360',
                },
                b: {
                    image: '',
                    width: 450,
                    height: 360,
                    placeholder: '450 * 360',
                }
            }
        },
        'three-fifth': {
            name: '3张图',
            background: 'rubik-2.png',
            cube: {
                a: {
                    image: '',
                    width: 300,
                    height: 360,
                    placeholder: '300 * 360',
                },
                b: {
                    image: '',
                    width: 450,
                    height: 180,
                    placeholder: '450 * 180',
                },
                c: {
                    image: '',
                    width: 450,
                    height: 180,
                    placeholder: '450 * 180',
                }
            }
        },
        'four-fifth': {
            name: '4张图',
            background: 'rubik-3.png',
            cube: {
                a: {
                    image: '',
                    width: 300,
                    height: 360,
                    placeholder: '300 * 360',
                },
                b: {
                    image: '',
                    width: 450,
                    height: 180,
                    placeholder: '450 * 180',
                },
                c: {
                    image: '',
                    width: 225,
                    height: 90,
                    // placeholder:'225 * 90',
                    placeholder: '225 * 180',
                },
                d: {
                    image: '',
                    width: 225,
                    height: 90,
                    // placeholder:'225 * 90',
                    placeholder: '225 * 180',
                }
            }
        },
        half: {
            name: '2张图平分',
            background: 'rubik-4.png',
            cube: {
                a: {
                    image: '',
                    width: 375,
                    height: 240,
                    placeholder: '375 * 240',
                },
                b: {
                    image: '',
                    width: 375,
                    height: 240,
                    placeholder: '375 * 240',
                }
            }
        },
        third: {
            name: '3张图平分',
            background: 'rubik-5.png',
            cube: {
                a: {
                    image: '',
                    width: 375,
                    height: 240,
                    placeholder: '375 * 240',
                },
                b: {
                    image: '',
                    width: 375,
                    height: 240,
                    placeholder: '375 * 240',
                },
                c: {
                    image: '',
                    width: 375,
                    height: 240,
                    placeholder: '375 * 240',
                }
            }
        },
        forth: {
            name: '4张图平分',
            background: 'rubik-6.png',
            cube: {
                a: {
                    image: '',
                    width: 188,
                    height: 188,
                    placeholder: '188 * 188',
                },
                b: {
                    image: '',
                    width: 188,
                    height: 188,
                    placeholder: '188 * 188',
                },
                c: {
                    image: '',
                    width: 188,
                    height: 188,
                    placeholder: '188 * 188',
                },
                d: {
                    image: '',
                    width: 188,
                    height: 188,
                    placeholder: '188 * 188',
                }
            }
        },
        'half-half': {
            name: '田字平分',
            background: 'rubik-7.png',
            cube: {
                a: {
                    image: '',
                    width: 375,
                    height: 186,
                    placeholder: '375 * 186',
                },
                b: {
                    image: '',
                    width: 375,
                    height: 186,
                    placeholder: '375 * 186',
                },
                c: {
                    image: '',
                    width: 375,
                    height: 186,
                    placeholder: '375 * 186',
                },
                d: {
                    image: '',
                    width: 375,
                    height: 186,
                    placeholder: '375 * 186',
                }
            }
        },
        free: {
            name: '魔方',
            background: 'rubik-8.png',
            col_num: 5, // cube的默认列数
            row_num: 5, // cube的默认行数
            cube: {}
        },
        free_table: {
            name: '魔方新(后台体验版)',
            background: 'rubik-8.png',
            right_mouse: {
                show: 0, // 右键属性面板是否显示
                layerX: 0, // 根据鼠标的相对定位x
                layerY: 0, // 根据鼠标的相对定位y
            },
            merging: 0,  // 是否正在合并单元格
            merge_start: '',  // 合并单元格起点
            merge_end: '',  // 合并单元格终点
            merge_info: [], // 合并的数组
            col_num: 5, // cube的默认列数
            row_num: 5, // cube的默认行数
            cube: {}
        }
    }
})

const fileManagerData = ref({
    visible:false,
})
const linkManagerVisible = ref({ show: 0 }) // 直接定义为 boolean 类型,导致 watch 侦听不到

const linkObject = ref(null)
const category_list = ref([])
const product_list = ref([])
const article_list = ref([])
const product = ref({
    list: {},
    filter: {
        name: ''
    }
})

const init = () => {

    if (route.params.id) {
        diy_id.value = route.params.id
        get_single();
    }

}
const get_single = () => {

    const url: string = VITE_URL + '/admin.design.diy/single?id=' + diy_id.value;
    axios.get(url).then((res: any) => {
        page_title.value = res.data.title;
        // block.value = JSON.parse(res.data.diy);
        block.value = res.data.diy;
        // if (Array.isArray(diy)) {

        setTimeout(function () {
            initArea();
        });

        // }
    })

}

init();

const initArea = () => {

    block.value.forEach(function (item: any, index: any) {

        if (!item.id) {
            item.id = new Date().getTime() + '-' + index;
        }
        if (Array.isArray(item.area)) {

            item.area.forEach(function (curr_area: any) {

                var html_area = '';

                var link_title = curr_area.page_link ? ('链接：' + curr_area.page_link.title) : ''
                var obj = $('<div id="' + curr_area.id + '" class="drag" '
                    + ' type="' + curr_area.type + '" index="' + curr_area.index
                    + '" src="' + curr_area.src
                    + '" oncontextmenu="openAreaContextMenu( ' + curr_area.id + ')'
                    + '" style="z-index:' + curr_area.index
                    + ';left:' + curr_area.left + 'px'
                    + ';top:' + curr_area.top + 'px'
                    + ';width:' + curr_area.width + 'px'
                    + ';height:' + curr_area.height + 'px'
                    + ' ">'
                    + '<span class="link">' + link_title + '</span>'
                    + '<div class="rRightDown"> </div>' +
                    '<div class="rLeftDown"> </div>' +
                    '<div class="rRightUp"> </div>' +
                    '<div class="rLeftUp"> </div>' +
                    '<div class="rRight"> </div>' +
                    '<div class="rLeft"> </div>' +
                    '<div class="rUp"> </div>' +
                    '<div class="rDown"></div>' +
                    '</div>');

                $('#' + item.id + ' .postera').append(obj);
                bindEvents(obj, {
                    container: '#' + item.id + ' .postera',
                    contextMenu_false: 1
                });
            });
        }
    });
}

const create_block = (layout_str: string) => {

    layout.value = layout_str;
    current_cube.value = '';
    var style = layout.value.split('.')[0];
    var type = layout.value.split('.')[1];
    var cube_json = '';
    if (type) {
        cube_json = JSON.stringify(layout_dict.value[style][type].cube);
    } else {
        cube_json = JSON.stringify(layout_dict.value[style].cube);
    }
    let cubes = JSON.parse(cube_json);

    for (var p in cubes) {
        cubes[p].page_link = '';
    }
    var block_curr = {
        id: new Date().getTime(),
        layout: layout.value,
        cubes: cubes,
        cube_space: 0,
    };
    if (layout_str == 'lunbo') {
        block_curr.width = layout_dict.value.lunbo.width;
        block_curr.height = layout_dict.value.lunbo.height;
    }
    if (layout_str == 'notice') {
        block_curr.interval = layout_dict.value.notice.interval;
        block_curr.duration = layout_dict.value.notice.duration;
        block_curr.directionArr = layout_dict.value.notice.directionArr;
        block_curr.direction = layout_dict.value.notice.direction;
        block_curr.width = layout_dict.value.notice.width;
        block_curr.height = layout_dict.value.notice.height;
    }
    if (layout_str == 'category') {
        block_curr.row_num = layout_dict.value.category.row_num;
        block_curr.col_num = layout_dict.value.category.col_num;
        block_curr.angle = layout_dict.value.category.angle;
    }
    if (layout_str == 'image.one') {
        block_curr.area = [];
    }

    // 魔方表格的情况下 layout== 'image.free_table'
    block_curr.merge_info = [];
    block_curr.right_mouse = {
        show: 0,
        layerX: 0,
        layerY: 0,
        clientX: 0,
        clientY: 0,
    }
    current_block.value = block_curr;
    block.value.push(block_curr);

}

const select_layout = (layout: string) => {

    current_block.value.layout = layout;
    current_cube.value = '';
    var style = layout.split('.')[0];
    var type = layout.split('.')[1];
    if (type == 'free') {

        var col = layout_dict.value[style][type].col_num;
        var row = layout_dict.value[style][type].row_num;
        col = col > 10 ? 10 : col;
        row = row > 10 ? 10 : row;
        current_block.value.col_num = col;
        current_block.value.row_num = row;
        mofangSet();

    } else if (type == 'free_table') {

        var col = layout_dict.value[style][type].col_num;
        var row = layout_dict.value[style][type].row_num;
        col = col > 10 ? 10 : col;
        row = row > 10 ? 10 : row;
        current_block.value.col_num = col;
        current_block.value.row_num = row;
        mofangTableSet();

    } else if (type) {
        var cube_json = JSON.stringify(layout_dict.value[style][type].cube);
        current_block.value.cubes = JSON.parse(cube_json);
    }
}

// 图片布局中的魔方布局修改
const mofangSet = () => {

    var col = current_block.value.col_num;
    var row = current_block.value.row_num;
    col = col > 10 ? 10 : col;
    row = row > 10 ? 10 : row;
    var cube_width = parseInt(750 / col);
    var cube_height = cube_width;
    current_block.value.cubes = {};
    for (var i = 0; i < row; i++) {
        for (var j = 0; j < col; j++) {

            var cube = {
                width: cube_width,
                height: cube_height,
                placeholder: cube_width + '*' + cube_height
            };
            current_block.value.cubes['no-' + i + '-' + j] = cube;
        }
    }

}
// 图片布局中的新魔方布局修改
const mofangTableSet = () => {

    var col = current_block.value.col_num;
    var row = current_block.value.row_num;
    col = col > 10 ? 10 : col;
    row = row > 10 ? 10 : row;
    // var cube_width  = parseInt( 750 / col );
    var cube_width = parseInt((750 - (col + 1) * current_block.value.cube_space) / col);
    var cube_height = cube_width;
    current_block.value.cubes = {};
    current_block.value.merge_info = [];
    // current_block.right_mouse.show=0;
    current_block.value.right_mouse = {
        show: 0,
        layerX: 0,
        layerY: 0,
        clientX: 0,
        clientY: 0,
    }
    for (var i = 0; i < row; i++) {
        for (var j = 0; j < col; j++) {

            var cube = {
                width: cube_width,
                height: cube_height,
                rowspan: 1,
                colspan: 1,
                hide: 0,
                image: '',
                placeholder: cube_width + '*' + cube_height
            };
            current_block.value.cubes['no-' + i + '-' + j] = cube;
        }
    }

}

const edit_cube = (blk: object, cube: any) => {
    // console.log( blk );
    current_block.value = blk;
    current_layout.value = blk.layout;
    current_cube.value = cube;
    current_area.value = null;

    if (current_cube.value) {
        if (current_layout.value.indexOf('image') > -1) {
            // select_link( current_block.cubes[ current_cube ].page_link );
        }
        // if( !current_block.right_mouse ){
        current_block.value.right_mouse = {
            show: 0,
            layerX: 0,
            layerY: 0,
            clientX: 0,
            clientY: 0,
        }
        // }
        if (current_layout.value == 'image.one') {
            if (!current_block.value.area) {
                current_block.value.area = [];
            }

        }
    }

}

const mergingTD = (blk: any, e: any) => {

    if (e.srcElement.tagName != 'TD'
        || !blk.merging
        || !blk.merge_start
    ) {
        return;
    }
    var key = e.srcElement.className.split(' ')[0];
    var origin_row = blk.merge_start.split('-')[1];
    var origin_col = blk.merge_start.split('-')[2];
    var curr_row = key.split('-')[1];
    var curr_col = key.split('-')[2];

    var left_top_row = Math.min(origin_row, curr_row)
    var left_top_col = Math.min(origin_col, curr_col)
    var right_bottom_row = Math.max(origin_row, curr_row)
    var right_bottom_col = Math.max(origin_col, curr_col)

    blk.merge_info = [left_top_row, left_top_col, right_bottom_row, right_bottom_col];
    // console.log( 'merge_info:');
    // console.log( blk.merge_info);
}



const startMergeTD = (blk: any, e: any) => {

    // console.log( 'start merge TD' );

    // console.log( 'e.button' );
    // console.log( e.button );
    // console.log( e.buttons );

    var current_cube_index = e.srcElement.className.split(' ')[0];
    var row = current_cube_index.split('-')[1];
    var col = current_cube_index.split('-')[2];

    current_block.value = blk;
    current_layout.value = blk.layout;
    current_cube.value = 'no-' + row + '-' + col;

    blk.right_mouse.show = 0;

    // 鼠标左键
    if (e.button == 0) {
        blk.merge_info = [];
        if (e.srcElement.tagName == 'TD') {
            blk.merging = 1;

            blk.merge_start = current_cube_index;

        }

    }

    // 鼠标右键
    if (e.button == 2) {

        // console.log( '鼠标右键' );

        // todo 显示属性面板，以便后续合并，分解单元格操作
        blk.right_mouse.show = 1;
        blk.right_mouse.layerX = e.layerX;
        blk.right_mouse.layerY = e.layerY;
        blk.right_mouse.clientX = e.pageX;
        blk.right_mouse.clientY = e.pageY;

        // console.log( e  );
        // console.log( e.layerX + '-' + e.layerY );
        // console.log( e.offsetX + '-' + e.offsetY );
        // console.log( e.pageX + '-' + e.pageY );
        // console.log( e.clientX + '-' + e.clientY );
        // console.log( e.x + '-' + e.y );


    }




}

const do_mergeTD = (blk: any) => {

    // todo 合并单元格
    if (!blk.merge_info.length) {
        return;
    }
    var top_left_row = blk.merge_info[0];
    var top_left_col = blk.merge_info[1];
    var bottom_right_row = blk.merge_info[2];
    var bottom_right_col = blk.merge_info[3];
    var td_top_left = 'no-' + top_left_row + '-' + top_left_col;
    var rowspan = blk.merge_info[2] - blk.merge_info[0] + 1;
    var colspan = blk.merge_info[3] - blk.merge_info[1] + 1;

    blk.cubes[td_top_left].rowspan = rowspan;
    blk.cubes[td_top_left].colspan = colspan;
    for (var i = top_left_row; i <= bottom_right_row; i++) {
        for (var j = top_left_col; j <= bottom_right_col; j++) {

            if (i == top_left_row && j == top_left_col) {
                continue;
            }
            var curr_index = 'no-' + i + '-' + j;
            blk.cubes[curr_index].hide = 1;


        }

    }
    blk.merge_info = [];
    blk.right_mouse.show = 0;


}

const do_unmergeTD = () => {

    // console.log( current_cube );
    if (!current_cube.value) {
        // alert('请先选中单元格');
        ElMessage({
            message: '请先选中单元格',
            type: 'error',
            duration: 800,
        })
    }

    var row = parseInt(current_cube.value.split('-')[1]);
    var col = parseInt(current_cube.value.split('-')[2]);
    // console.log( current_block.cubes[ current_cube ] )
    var rowspan = current_block.value.cubes[current_cube.value].rowspan;
    var colspan = current_block.value.cubes[current_cube.value].colspan;

    var i = 0;
    while (i < rowspan) {
        var j = 0;
        while (j < colspan) {
            // console.log(while_index);
            var while_row = row + i;
            var while_col = col + j;
            var while_index = 'no-' + while_row + '-' + while_col;
            // console.log('while_index:'+while_index);
            current_block.value.cubes[while_index].rowspan = 1;
            current_block.value.cubes[while_index].colspan = 1;
            current_block.value.cubes[while_index].hide = 0;
            j++;
        }
        i++;
    }
    current_block.value.right_mouse.show = 0;

}

const endMergeTD = (blk: any) => {
    // console.log( 'end merge TD' );
    // console.log( e.srcElement );
    blk.merging = 0;
    blk.merge_start = '';
}

// 添加图片上的热点区域
const add_hot_area = () => {

    var size = '';
    var color = '';
    var img = "";

    var area = {
        id: new Date().getTime(),
        index: $('.postera .drag').length + 1,
        type: 'img',
        src: '',
        left: '10px',
        top: '10px',
        width: '80px',
        height: '80px',
    };
    current_block.value.area.push(area);

    var link_title = area.page_link ? ('链接：' + area.page_link.title) : ''
    var obj = $('<div id="' + area.id + '" class="drag" ' + size + color
        + ' type="' + area.type + '" index="' + area.index
        + '" src="' + area.src
        + '" oncontextmenu="openAreaContextMenu( ' + area.id + ')'
        + '" style="z-index:' + area.index
        + ';left:' + area.left
        + ';top:' + area.top
        + ' ">'
        + '<span class="link">' + link_title + '</span>'
        + '<div class="rRightDown"> </div>' +
        '<div class="rLeftDown"> </div>' +
        '<div class="rRightUp"> </div>' +
        '<div class="rLeftUp"> </div>' +
        '<div class="rRight"> </div>' +
        '<div class="rLeft"> </div>' +
        '<div class="rUp"> </div>' +
        '<div class="rDown"></div>' +
        '</div>');

    $('.postera.active').append(obj);
    // let activePostera = document.getElementsByClassName('postera active')[0];
    // activePostera.appendChild(obj);
    bindEvents(obj, {
        container: $('.postera.active'),
        contextMenu_false: 1
    });
}

// 删除热点
const area_delete = () => {

    current_block.value.right_mouse.show = 0;
    var area_id = current_area.value.id;
    var area_len = current_block.value.area.length;
    for (var i = area_len - 1; i >= 0; i--) {

        if (current_block.value.area[i].id == area_id) {
            current_block.value.area.splice(i, 1);
            current_area.value = null;
            break;
        }
    }

    // todo 删除 相关的dom 节点
    $('#' + area_id).remove();
}

// todo: 编辑热点链接, 未完成
const area_edit_link = () => {
    current_block.value.right_mouse.show = 0;
    open_link_manager('a');
    // open_link_manager_forArea( 'a' );
}

const findAreaById = (block: any, area_id: any) => {

    var ret = null;
    block.area.forEach(function (area) {
        if (area.id == area_id) {
            ret = area;
        }
    });
    return ret;
}

const findBlockById = (id: any) => {
    // console.log(id);

    var blk = null;
    block.value.forEach(function (item) {
        if (item.id == id) {
            blk = item;
        }
    });
    return blk;

}

const add_lunbo_cube = (blk: any) => {

    var item = {
        image: '',
        page_link: ''
    };

    blk.cubes.push(item);

}
const add_notice_cube = (blk: any) => {

    var item = {
        text: '',
        page_link: ''
    };
    blk.cubes.push(item);

}

const remove_notice_cube = (cube_index: any) => {
    current_cube.value = null;
    Vue.delete(current_block.value.cubes, cube_index);
}

const add_lunbo_image = (cube_index: any) => {
    current_cube.value = cube_index;
    open_file_manager();
}

const delete_lunbo_cube = (cube_index: any) => {
    current_cube.value = null;
    Vue.delete(current_block.value.cubes, cube_index);
}

const block_delete = () => {

    var index = block.value.indexOf(current_block.value);
    block.value.splice(index, 1);

}

const block_copy = () => {
    var index = block.value.indexOf(current_block.value);
    var layout = current_block.value.layout;
    var cubes_json = JSON.stringify(current_block.value.cubes);

    var cubes = JSON.parse(cubes_json);

    var new_block = {
        layout: layout,
        cubes: cubes
    };

    block.value.splice(index, 0, new_block);
}

const block_up = () => {
    var index = block.value.indexOf(current_block.value);
    if (index) {
        var block_piece = block.value.splice(index, 1);
        block.value.splice(index - 1, 0, block_piece[0]);
    }
}

const block_down = () => {
    var index = block.value.indexOf(current_block.value);
    if (index < block.value.length - 1) {
        var block_piece = block.value.splice(index, 1);
        block.value.splice(index + 1, 0, block_piece[0]);
    }
}

const save = () => {

    // var t = this;
    let url = VITE_URL + '/admin.design.diy/edit'
    if (diy_id.value) {

        url += '?diy_id=' + diy_id.value;
    }
    if (page_title.value.replace(/^(\s+)|(\s+)$/g, '').length == 0) {
        // alert('页面标题不能为空');
        ElMessage({
            message: '页面标题不能为空',
            type: 'error',
            duration: 800,
        })
        return;
    }

    for (var i = 0; i < block.value.length; i++) {

        if (Array.isArray(block.value[i].area)) {

            // block[i].area.forEach(function( item ){
            for (var j = block.value[i].area.length - 1; j >= 0; j--) {

                var id = block.value[i].area[j].id;
                if ($('#' + id).length) {
                    block.value[i].area[j].width = $('#' + id).width();
                    block.value[i].area[j].height = $('#' + id).height();
                    block.value[i].area[j].left = $('#' + id).position().left;
                    block.value[i].area[j].top = $('#' + id).position().top;
                    // console.log(block.value[i].area[j]);
                } else {
                    // todo  删除
                    block.value[i].area.splice(j, 1);
                }

            }
        }

    }
    var data = {
        title: page_title.value,
        diy: JSON.stringify(block.value),
    };
    
    axios.post(url, data).then(function (res) {

        // if (res.data.status) {
        //     alert(res.data.description);
        //     return;
        // }
        // router.back();
        ElMessage({
            message: !res.data.status?'保存成功':res.data.description,
            type: !res.data.status ? 'success' : 'error',
            duration: 800,
            onClose:()=>{
                if (!res.data.status) {
                    router.back();
                }
            }
        })
        

    });

}

const select_link = (key: any) => {

    // console.log( key );
    if (!key) {
        selected_link.value = '';
    } else {
        selected_link.value = link_dict.value[key];
    }
    if (!current_block.value.cubes[current_cube.value].link_params) {
        current_block.value.cubes[current_cube.value].link_params = {};
    }
    if (selected_link.value.params) {
        for (var p in selected_link.value.params) {
            var val = '';
            if (current_block.value.cubes[current_cube.value].link_params[p]) {
                val = current_block.value.cubes[current_cube.value].link_params[p];
            } else {
                current_block.value.cubes[current_cube.value].link_params[p] = '';
            }
            selected_link.value.params[p].value = val;
        }
    }
}
const select_link_param = (param: any) => {

    if (!current_block.value.cubes[current_cube.value].link_params) {
        current_block.value.cubes[current_cube.value].link_params = {};
    }
    current_block.value.cubes[current_cube.value].link_params[param.key] = param.value;

}

const get_category_list = function () {

    // var t = this;
    // var url = url_pre + '&r=diy.category';
    var url = VITE_URL + '/admin.design.diy/category';


    category_list.value = [];
    url += '&status=1';
    axios.get(url).then(function (res) {

        res.data.forEach(function (item: any) {
            item.label = item.name;
            item.key = item.id;
            category_list.value.push(item);

        })


    });

}

const get_product_list = () => {

    // var t = this;
    // var url = url_pre + '&r=diy.product';
    var url = VITE_URL + '/admin.design.diy/product';
    // if( category.filter.name ){
    //     url += '&name=' + product.filter.name;
    // }
    product_list.value = [];
    url += '&status=1';
    axios.get(url).then(function (res) {

        res.data.forEach(function (item: any) {
            item.label = item.name;
            item.key = item.id;
            product_list.value.push(item);
        });

    });

}
get_product_list();
const get_article_list = () => {

    // var t = this;
    // var url = url_pre + '&r=diy.article';
    var url = VITE_URL + '/admin.design.diy/article';
    article_list.value = [];
    url += '&status=1';
    axios.get(url).then(function (res) {
        res.data.forEach(function (item: any) {
            item.label = item.title;
            item.key = item.id;
            article_list.value.push(item);
        });
    });

}
get_article_list();
const filter_product = (query: any, item: any) => {

    query = query.replace(/^(\s+)|(\s+)$/g, '');
    if (!query) {
        return item;
    } else {
        return item.label.indexOf(query) > -1;
    }


}

const filter_article = (query: any, item: any) => {

    query = query.replace(/^(\s+)|(\s+)$/g, '');
    if (!query) {
        return item;
    } else {
        return item.label.indexOf(query) > -1;
    }


}



const open_link_manager = (cube_index) => {

    current_cube.value = cube_index;
    // linkManagerVisible.value = true;
    linkManagerVisible.value.show = 1;

    linkObject.value = current_block.value.cubes[cube_index].page_link ? current_block.value.cubes[cube_index].page_link : '';


}
const linkManagerExpress = (data) => {
    // linkManagerVisible.value = data.visible;
    linkManagerVisible.value.show = data.visible;
    if (data.link) {
        // console.log(data.link);
        if (current_area.value) {
            // todo 同步dom 显示 链接信息
            current_area.value.page_link = data.link;

            var area_id = current_area.value.id;
            var link_text = '链接：' + data.link.title;
            $('#' + area_id + ' .link').html(link_text);
        } else {
            current_block.value.cubes[current_cube.value].page_link = data.link;
        }

    }
}

const open_file_manager = () => { fileManagerData.value.visible = true; }
const fileManagerExpress = ( data ) => {
    
    console.log( 'fileManagerExpress.data:', data )
    fileManagerData.value.visible = data.visible;
    if (data.image) {
        // var path = '/attachment/' + data.image.path;
        // var path = data.image.url;
        var path = VITE_URL + '/storage/' + data.image.path;
        current_block.value.cubes[current_cube.value].image = path;
    }
}

onMounted(() => {

    // nextTick(() => {
    //     console.log('nexttick')

    // })


    // 隐藏windows 系统鼠标右键菜单
    document.addEventListener("contextmenu", function (event) {

        if ($(event.srcElement).hasClass('drag')) {
            event.preventDefault();
        }

        if ($(event.srcElement).parents('.free_table').length) {
            event.preventDefault();
        }

    });

    window.openAreaContextMenu = (dom_id: any) => {

        var blk_id = $('#' + dom_id).parents('.layout')[0].id;
        current_block.value = findBlockById(blk_id);
        current_area.value = findAreaById(current_block.value, dom_id);
        current_layout.value = current_block.value.layout;
        current_cube.value = 'a';

        let leftSideWidth = $('.el-aside').width();
        var e = event || window.event;
        current_block.value.right_mouse.show = 1;
        current_block.value.right_mouse.layerX = e.layerX;
        current_block.value.right_mouse.layerY = e.layerY;
        current_block.value.right_mouse.clientX = e.pageX - leftSideWidth;
        current_block.value.right_mouse.clientY = e.pageY;

    }
})

</script>


<style lang="less">
@import '../../../../assets/style/diy.less';
</style>
<style>
.poster-design {

    width: 320px;
    height: 504px;
    border: 1px solid #cdcdcd;
    position: relative;
}

.poster-design .bg {

    width: 100%;
    /*height:100%;*/
    position: absolute;
}

/* 来自远方的拷贝 ^_^, 已做细节修改 */

.postera {
    width: 320px;
    height: 504px;
    border: 1px solid #ccc;
    position: relative
}

.postera .bg {
    position: absolute;
    width: 100%;
    z-index: 0
}

.postera .drag[type=img] img,
.postera .drag[type=thumb] img {
    width: 100%;
    height: 100%;
}

.postera .drag {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1px solid #000;
}


.postera .drag[type=nickname],
.postera .drag[type=time] {
    width: 80px;
    height: 40px;
    font-size: 16px;
    font-family: 黑体;
}

.postera .drag img {
    position: absolute;
    z-index: 0;
    width: 100%;
}

.postera .rRightDown,
.rLeftDown,
.rLeftUp,
.rRightUp,
.rRight,
.rLeft,
.rUp,
.rDown {
    position: absolute;
    width: 7px;
    height: 7px;
    z-index: 1;
    font-size: 0;
}


.postera .rRightDown,
.rLeftDown,
.rLeftUp,
.rRightUp,
.rRight,
.rLeft,
.rUp,
.rDown {
    background: #C00;
}

.rLeftDown,
.rRightUp {
    cursor: ne-resize;
}

.rRightDown,
.rLeftUp {
    cursor: nw-resize;
}

.rRight,
.rLeft {
    cursor: e-resize;
}

.rUp,
.rDown {
    cursor: n-resize;
}

.rLeftDown {
    left: -4px;
    bottom: -4px;
}

.rRightUp {
    right: -4px;
    top: -4px;
}

.rRightDown {
    right: -4px;
    bottom: -4px;
}

.rRightDown {
    background-color: #00F;
}

.rLeftUp {
    left: -4px;
    top: -4px;
}

.rRight {
    right: -4px;
    top: 50%;
    margin-top: -4px;
}

.rLeft {
    left: -4px;
    top: 50%;
    margin-top: -4px;
}

.rUp {
    top: -4px;
    left: 50%;
    margin-left: -4px;
}

.rDown {
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
}

.context-menu-layer {
    z-index: 9999;
}

.context-menu-list {
    z-index: 9999;
}
</style>